<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="1st.js"></script>
</head>

<body>
<h3>《哪些花儿》幻灯片示例</h3>

<style>
#sbox08{position:relative;width:760px;height:240px;}
#sbox08 .title{position:absolute;text-align:center;}
#sbox08 .title p{position:absolute;width:760px;color:#fff;display:none;}
#sbox08 .title em{font-size:20px;}
#sbox08 .panel{position:absolute;}
#sbox08 .panel img{width:760px;height:240px;display:none;}
#sbox08 .masklayer{position:absolute;display:none;width:100%;height:100%;background:#000;opacity:0;filter:alpha(opacity:0);}
#sbox08 .bottombar{position:absolute;background:#000;bottom:0;height:50px;width:100%;border-top:1px solid #fff;opacity:0.6;filter:alpha(opacity:60);}
#sbox08 .tab{position:absolute;dis_background:#ccc;bottom:20px;}
#sbox08 .tab span{position:relative;float:left;width:140px;height:42px;}
#sbox08 .tab span img{position:absolute;left:70px;top:0;border:1px solid #fff;width:52px;height:40px;cursor:pointer;opacity:0.6;filter:alpha(opacity:60);}
#sbox08 .tab span img.first{left: 61px; opacity: 1;top: -10px;width: 70px;}
</style>
<div id="sbox08">
	<div class="panel">
		<img src="data/img/slides/scene/big05.jpg" style="display:inline;" />
		<img src="data/img/slides/scene/big05.jpg" />	
		<img src="data/img/slides/scene/big05.jpg" />
		<img src="data/img/slides/scene/big05.jpg" />
		<img src="data/img/slides/scene/big05.jpg" />
	</div>
	<div class="title">
		<p style="display:block;"><em>美景如画的海景</em></p>
		<p><em>Handy Code</em><br/>春华秋实</p>
		<p><em>郁郁葱葱的生命</em><br/>生生不息的生命</p>
		<p><em>孤独的一棵老树</em><br/>等谁呢？</p>
		<p><em>明媚的向日葵花</em><br/>生生不息的生命</p>
	</div>
	<div class="masklayer" id="maskLayer"></div>
	<div class="bottombar"></div>
	<div class="tab">
		<span><img class="first" src="data/img/slides/scene/small01.jpg"/></span>
		<span><img src="data/img/slides/scene/small02.jpg"/></span>
		<span><img src="data/img/slides/scene/small03.jpg"/></span>
		<span><img src="data/img/slides/scene/small04.jpg"/></span>
		<span><img src="data/img/slides/scene/small05.jpg"/></span>
	</div>
</div>

<script type="text/javascript">
F("sbox08").slides({
	init : function(me){
		me.maskLayer = F("maskLayer");
	},
	tab: function(me){
		me.tab.item(me.nowIndex).first().anime({
			top:-10, duration:100, width:70, ws:0.5, opacity:1, type:'Linear', after:function(){
				me.tab.item(me.oldIndex).first().anime({
					top:0, duration:100, width:52, ws:0.5, opacity:0.6, type:'circOut'
				});
			}
		});
	},	
	onchange : function(me){
		this.isplay = 1;
		me.maskLayer.show().anime({
			opacity:0.8, duration:200, after:function(){
				me.maskLayer.anime({
					opacity:0, duration:300, after:function(){
						me.maskLayer.hide();
						me.unlock();
					}
				});
			}
		});	
	}	
});
</script>
</body>
</html>
